<template>
    <div class="header">
      <div class="title">
          <span >文物信息管理及智能检索平台——后台管理</span>
      </div>
      <div class="wenwu"><i class="iconfont icon-danganwenwu"></i></div>
      <div class="yonghu" @click="JumpPerson">
      <i class="iconfont icon-yonghu" v-if="!image"></i>
      <img class="headImage" v-else :src="getImageUrl(image)" />
      <span class="loginName">{{ username }}</span>
    </div>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  export default {
      data(){
          return {

          }
      },
      computed:{
        ...mapState("login", ["username", "image"]),
      },
      methods:{
        getImageUrl(imageName) {
      const prefix = this.$imagePrefix;
      console.log(prefix);
      return `${prefix}${imageName}`;
    },
        JumpPerson(){
            this.$router.push({path:'/SuperAdminPerson/baseData'})
        },
      }
  
  }
  </script>
  
  <style scoped>
  .header{
      display:flex;
      background: rgba(42,81,77, 1);
      /* background: transparent; */
      height:80px;
      position:sticky;
      top:0;
      justify-content: flex-end;
      align-items: end;
      z-index: 1;
  }
  .title{
      display: inline-block;
      width: 600px;
      font-size:30px;
      font-family: '楷体';
      color: #C1925B;
      height:80px;
      line-height: 80px;
      text-align: center;
      flex-shrink: 0;
  }
  .wenwu{
      flex-grow: 1;
      line-height: 80px;
      height: 80px;
      vertical-align: middle;
      padding-top:1px;
      text-align: center;
  }
  .yonghu {
  display: inline-block;
  width: 200px; 
  line-height: 40px;
  height: 80px;
  flex-shrink: 0;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}
.loginName {
  display: block;
  font-size: 14px;
  width: 100px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  margin: 0px auto;
}
.icon-yonghu,
.icon-danganwenwu {
  color: #fff;
  font-size: 45px;
}
.headImage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
  </style>